@import 'vars.styl';

.tree
  overflow: hidden
  user-select: none
  -webkit-user-select: none
  *
    box-sizing: border-box
  ul, li
    padding: 0
    margin: 0
    list-style: none
  .tree-left, .tree-right
    float: left
    width: 360px
  .tree-right
    margin-left: 20px
  .tree-area-title
    padding-bottom: 5px
    font-weight: bold
    color: #676f75
  .tree-wrap, .tree-node-selected
    width: 100%
    height: 400px
    border: 1px solid #D5DCE2
    overflow: auto
  .tree-wrap
    padding: 10px
    color: #888
  .tree-node-selected
    .tree-node-selected-item
      height: 36px
      line-height 35px
      padding-left: 10px
      color: theme-color
      border-bottom: 1px solid #E7ECF1
      .icon
        margin-right: 5px
  .tree-node
    position: relative
    > .tree-nodes
      padding-left: 30px
      content: ''
    &:not(:last-of-type):before
      position: absolute
      top: 15px;
      left: -23px;
      z-index: 1
      height: 100%
      border-right: 1px dashed #ddd
      content: ''

  .tree-node-info
    position: relative
    display: block
    height: 30px
    line-height: 30px
    &:before
      position: absolute
      top: 15px;
      left: -22px;
      width: 22px;
      z-index: 1
      border-top: 1px dashed #ddd
      content: ''
    &:not(.tree-leaf):after
      position: absolute
      top: 23px;
      left: 7px;
      height: 22px;
      z-index: 1
      border-right: 1px dashed #ddd
      content: ''
  .icon
    display inline-block
    width: 16px
    height: 16px
    cursor: pointer
    vertical-align: -3px;
  .icon_expand
    position: relative
    z-index: 2
    background: #fff url(../img/icon_expand.png) no-repeat
  .icon_collapse
    position: relative
    z-index: 2
    background: #fff url(../img/icon_collapse.png) no-repeat
  .icon-place
    background: #fff url(../img/icon_place.png) no-repeat
  .icon-store
    background: #fff url(../img/icon_store.png) no-repeat

  .icon_checkbox
    margin-right: 5px;
    margin-left: 2px;
    background: url(../img/icon_checkbox.png) no-repeat
  .icon-delete
    float: right
    margin-right: 10px
    height: 35px
    cursor: pointer
    background: url("../img/icon_delete.png") no-repeat center center
  input[type=checkbox]:checked + .icon_checkbox
    background: url(../img/icon_checkbox_checked.png) no-repeat
